{% extends 'base.html' %}
{% block title %}作者详情 - Local Library{% endblock %}
{% block content %}
    <h1>作者详情</h1>
    <div class="info-card" style="max-width:420px;margin-bottom:28px;">
        <div class="info-card-title" style="font-size:1.18rem;">👤 {{ author.last_name }}{{ author.first_name }}</div>
        <div class="info-item"><b>出生日期：</b>{{ author.date_of_birth }}</div>
        <div class="info-item"><b>去世日期：</b>{{ author.date_of_death|default:'--' }}</div>
        <div class="info-item"><b>作品总数：</b>{{ author.book_count|default:'--' }}</div>
        <div class="info-item"><b>借阅总量：</b>{{ author.borrowed_count|default:'--' }}</div>
        {% if author.intro %}<div class="info-item"><b>简介：</b>{{ author.intro }}</div>{% endif %}
    </div>
    <div style="margin-bottom:18px;">
        <button class="btn btn-info" onclick="showAIDialog()">与AI作者对话</button>
    </div>
    <div id="ai-dialog" style="display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;background:#0003;z-index:1000;align-items:center;justify-content:center;">
        <div style="background:#fff;padding:32px 24px;border-radius:12px;max-width:420px;width:90vw;box-shadow:0 4px 32px #0002;position:relative;">
            <span style="position:absolute;top:10px;right:18px;cursor:pointer;font-size:1.3rem;" onclick="closeAIDialog()">×</span>
            <h3>与AI作者对话</h3>
            <div style="color:#888;font-size:0.98rem;margin-bottom:8px;">你正在与"{{ author.last_name }}{{ author.first_name }}"对话</div>
            <textarea id="ai-question" rows="3" style="width:100%;border-radius:6px;margin-bottom:10px;" placeholder="请输入你的问题..."></textarea>
            <button class="btn btn-success" style="padding:6px 18px;" onclick="askAI()">发送</button>
            <div id="ai-answer" style="margin-top:16px;color:#2563eb;"></div>
        </div>
    </div>
    <h2>该作者的图书</h2>
    {% if books %}
        <div class="cards-row" style="flex-wrap:wrap;gap:16px;">
        {% for book in books %}
            <div class="info-card" style="min-width:220px;max-width:260px;flex:1 1 220px;">
                <div class="info-card-title">📖 <a href="{% url 'book-detail' book.pk %}">{{ book.title }}</a></div>
                <div class="info-item"><b>简介：</b>{{ book.summary|truncatechars:30 }}</div>
                <div class="info-item"><b>借阅次数：</b>{{ book.borrowed_count|default:'--' }}</div>
            </div>
        {% endfor %}
        </div>
    {% else %}
        <p>暂无该作者的图书。</p>
    {% endif %}
    <p><a href="{% url 'authors' %}" class="btn">返回作者列表</a></p>
    <script>
    function showAIDialog() {
        document.getElementById('ai-dialog').style.display = 'flex';
    }
    function closeAIDialog() {
        document.getElementById('ai-dialog').style.display = 'none';
        document.getElementById('ai-answer').textContent = '';
        document.getElementById('ai-question').value = '';
    }
    function askAI() {
        const question = document.getElementById('ai-question').value.trim();
        if(!question) { alert('请输入问题'); return; }
        document.getElementById('ai-answer').textContent = 'AI思考中...';
        fetch("{% url 'ai-ask-author' %}", {
            method: 'POST',
            headers: {
                'X-CSRFToken': '{{ csrf_token }}',
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: 'author_name={{ author.last_name }}{{ author.first_name }}&question=' + encodeURIComponent(question)
        })
        .then(res => res.json())
        .then(data => {
            document.getElementById('ai-answer').textContent = data.answer || 'AI未能作答';
        });
    }
    </script>
{% endblock %} 